<template>
	<view class="page">
		<u-navbar :is-back="true" title="我的实习圈"></u-navbar>
		<!-- <h3>我的实习圈界面</h3> -->
		<view class="bgship">
			<u-avatar :src="user.avatar" size="90" mode="square" class="avatar-ship" @click="remind" ></u-avatar>
			<span :class="{'remind':isRemind}"></span>
			<!-- <span @click="myComment" size="mini" class="btn" type="primary">我的评论</span> -->
		</view>

		<view class="page-box" v-for="(item, index) in moment" :key="index">
			<view class="info-head">
				<view class="info-head-ava">
					<u-avatar :src="item.reportAvatar" size="70" mode="square"></u-avatar>
					<view class="name-time">
						<view class="name">{{ item.reportName }}</view>
						<view class="info-time">{{ item.time }}</view>
					</view>
				</view>
				<view><u-icon name="trash" size="40" @click="delMoment(item.id, item.momentType, index)"></u-icon></view>
			</view>
			<view class="info" @click="dynamicInfo(item.id, item.momentType)">
				<view class="info-text"><rich-text :nodes="item.content"></rich-text></view>
				<view v-if="item.picture1 != null">
					<u-image height="300" width="400" :src="item.picture1" mode="aspectFit"></u-image>
				</view>
			</view>
			<view class="info-bottom">
				<view class="thumb">
					<!-- item.thumbClick判断是否点赞 -->
					<u-icon
						name="thumb-up"
						size="40"
						@click="thumbClick(item, index)"
						:class="{ 'thumb-active': thumbStatus[item.id] }"
					></u-icon>
					<view class="thumbnum">{{ item.thumbNum }}</view>
				</view>
				<u-icon name="chat" size="40"></u-icon>
				<view class="thumbnum">{{ item.comments.length }}</view>
				<!-- <u-icon name="chat" size="40" @click="showInput = !showInput"></u-icon> -->
			</view>
			<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" height="300rpx">
				<view class="receive">
					<view class="title">确认删除此条动态？</view>
					<view class="describe"></view>
					<view class="btn">
						<u-button size="medium" type="primary" @click="cancel">取消</u-button>
						<u-button size="medium" type="primary" @click="delMomentDown">确认</u-button>
					</view>
				</view>
			</u-popup>
			<view v-if="item.comments.length > 0">
				<view class="comment" v-for="(com, idx) in item.comments" :key="idx">
					<span class="com-name">{{ com.commentatorName }}:</span>
					{{ com.content }}
				</view>
			</view>
			<!-- <view v-if="showInput == true"> -->
			<!-- <view>
				<u-field
					v-model="inputValue[index]"
					label-width="0"
					placeholder="请输入评论"
					:focus="focus"
					class="comment-input"
				>
					<u-button size="mini" slot="right" type="primary" @click="sendComment(item, index)">确定</u-button>
				</u-field>
			</view> -->
		</view>
	</view>
</template>

<script>
import { parseTime, getNowTime } from '../../utils/nowTime.js';
export default {
	data() {
		return {
			user: {},
			moment: [],
			showInput: false,
			inputValue: [],
			focus: false,
			thumbStatus: {},
			show: false,
			confirm: false,
			payload: {} ,// 删除动态所需的参数
			isRemind:false
		};
	},
	async onLoad(option) {
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		let res = await this.$u.api.personalMoment();
		console.log('all res:', res);
		this.moment = res.rows;
		this.addPrev(this.moment);
		// 根据momentType判断是哪一种类型的动态，0为撕逼墙、1为加油站、2为问大家
		
		if(option.remind >0 ){
			this.isRemind = true
		}
	},
	methods: {
		remind(){
			
		},
		addPrev(dataList) {
			dataList.forEach(item => {
				if (!item.commentatorName) {
					item.commentatorName = '匿名';
				}
				if (item.time) {
					item.time = parseTime(item.time);
				}
				if (item.picture1 && !item.picture1.includes('http')) {
					item.picture1 = this.$store.state.projectIp + item.picture1;
				}
				if (item.momentType == 1) {
					if (item.reportAvatar && !item.reportAvatar.includes('http')) {
						item.reportAvatar = this.$store.state.projectIp + item.reportAvatar;
					}
				} else if (item.momentType == 0) {
					item.reportName = '匿名';
					item.reportAvatar =
						'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1305454818,873736954&fm=26&gp=0.jpg';
					if (item.comments && item.comments.length > 0) {
						this.addPrev(item.comments);
					}
				}
			});
			return;
		},
		async delMoment(id, typeId, index) {
			this.show = true;
			this.payload = { id, typeId, index };
		},
		async delMomentDown() {
			let { id, typeId, index } = this.payload;
			let res = undefined;
			if (typeId == 0) {
				res = await this.$u.api.delAnonymousMoment({ id });
			} else if (typeId == 1) {
				res = await this.$u.api.delCheerMoment({ id });
			}
			if (res) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 900
				});
			}
			this.moment.splice(index, 1);
			this.show = false;
		},
		cancel() {
			this.show = false;
		},

		dynamicInfo(dynamicId, typeId) {
			let type = '';
			if (typeId == 0) {
				type = 'anonymous';
			} else if (typeId == 1) {
				type = 'cheer';
			}
			console.log('type', type, typeId, dynamicId);
			uni.navigateTo({
				url: `./comment?dynamicId=${dynamicId}&type=${type}`
			});
		},

		myComment() {
			uni.navigateTo({
				url: './myComment'
			});
		},
		async thumbClick(item, index) {
			console.log('thumb-click', item, this.thumbStatus);
			console.log('user:', this.user);
			let param = {
				momentId: item.id,
				thumbedId: this.user.userId
			};
			let isClick = false;
			console.log('item thumbs all', item.thumbs.length, this.user.userId);
			if (item.thumbs.length > 0) {
				for (let i = 0; i < item.thumbs.length; i++) {
					console.log('item thumbs', item.thumbs[i].thumbedId, this.user.userId);
					if (item.thumbs[i].thumbedId == this.user.userId) {
						isClick = true;
					}
				}
			}
			if (isClick) {
				console.log('thumb-click-have');
				// 以任务id为唯一标识
				this.thumbStatus[item.id] = false;
				for (let i = 0; i < item.thumbs.length; i++) {
					if (item.thumbs[i].thumbedId == this.user.userId) {
						item.thumbs.splice(i, 1);
						item.thumbNum--;
					}
				}
				this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.delCheerMomentThumb(param);
				console.log('res-have', res);
			} else {
				console.log('res-no');
				this.thumbStatus[item.id] = true;
				item.thumbNum++;
				item.thumbs.push({ thumbedId: this.user.userId, thumbedName: this.user.nickName });
				this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.clickCheerMomentThumb(param);
				console.log('res-no', res);
			}
		}
	}
};
</script>

<style lang="scss">
.page {
	background-color: #f0f0f0;
}
.bgship {
	height: 400rpx;
	background-image: url(../../static/img/bgship.jpg);
	background-size: 100% 100%;
	border-radius: 10rpx;
	.avatar-ship {
		position: absolute;
		left: 2vw;
		top: 380rpx;
	}
	.remind::after{
		content: '';
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background-color: #FF0000;
		position: absolute;
		left: 12vw;
		top: 372rpx;
	}
	.btn{
		position: absolute;
		left: 20vw;
		top: 400rpx;
		color: #fff;
	}
}
.page-box {
	width: 96vw;
	margin: 2vh 2vw;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 20rpx;

	.info-head {
		// margin: 10rpx;
		// border-bottom: solid 1px #f9eeff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-ava {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.name-time {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.name {
			}
			.info-time {
				font-size: 0.8em;
			}
		}
	}

	.info {
		// background-color: rgba(255, 253, 254, 0.8);
		.info-text {
			margin: 10rpx 0;
		}
		// border-bottom: solid 1px #f9eeff;
	}

	.info-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 15rpx 20rpx;
		border-bottom: solid 1px #f9e4ff;
		.thumb {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10rpx;
		}

		.thumbnum {
			margin: 0 0 0 5rpx;
			font-size: 5rpx;
		}
	}

	.comment {
		// border: solid 1px #007AFF;
		margin: 10rpx 0;
		.com-name {
			color: #295c9d;
			margin: 0 10rpx 0 0;
		}
	}
	.comment-input {
	}
}
.thumb-active {
	color: #007aff;
}

.receive {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.title {
		font-size: 1.1em;
		padding: 4vh;
	}
	.describe {
		margin: 0 2vh 3vh 2vh;
	}
	.btn /deep/ .u-size-medium {
		padding: 0 50rpx;
		margin: 0 20rpx;
	}
}
</style>
